<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../../css/pay.css">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script type="text/javascript" src="../../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.js"></script>
    <script type="text/javascript" src="../../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../../js/axios-0.21.0.js"></script>
</head>

<body class="body">
<div id="pay" class="container">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="/front/main.html" class="navbar-brand">在线珠宝商城</a>

            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/dandgang/front/cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
                        </svg>
                    </a>
                </li>
                <li class="divider"></li>
                <li><a href="">我的珠宝</a></li>
                <li class="divider"></li>
                <li><a href="">帮助</a></li>
            </ul>
        </div>
    </div>

    <div class="bd">
        <div class="row">

            <div class="col-md-7">

                <ul class="nav nav-pills " style="padding-top:10px">
                    <li style="margin: 10px;background:rgb(246,246,246)"><h4 style="margin:15px;">1.购物车</h4></li>
                    <li style="margin: 10px;background:rgb(246,246,246)"><h4 style="margin:15px">2.填写订单</h4></li>
                    <li style="margin:10px;background:rgb(255,102,102)"><h4 style="margin:15px;color:rgb(255,231,250)"
                                                                            class="text-muted">3.支付订单</h4></li>
                </ul>
            </div>
        </div>
        <hr style="border:solid 2px red;">

        <div class="bd-main">
            <div class="ep-wrapper" v-if="!success">
                <div class="ep-pay-step ep-step-channel bd-main-container"
                     style="padding: 30px 270px 30px 250px;display: block;">
                    <div class="ep-order-detail">
                        <!-- <div>
                            <div class="ep-order-tit">
                                <dl>
                                    <dt>商品订单：</dt>
                                    <dd>{{orderId}}</dd>
                                </dl>
                            </div>
                            <div class="ep-order-tit">
                                <span>支付金额：<em class="rmb"><i>¥</i>{{paymentInfo.amount / 100}}</em></span>
                            </div>
                        </div> -->
                        <div>
                            <img src="../images/pay/loading.gif" style="height:90px;"/>
                            <span class="hit-words">订单[<em style="color: #0ac265">{{orderId}}</em>]正在支付中，请耐心等待...</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="paid-info" v-else>
                <div class="first-line">
                    <img src="../images/pay/success.png" class="paid-success"></img>
                    <span class="success-words">支付成功！</span>
                </div>
                <div class="second-line">
                    <p class="order-words">商品订单：{{orderId}}</p>
                    <p class="order-words">支付金额：<em class="rmb"><i>¥</i>{{total}}</em></p>
                    <p class="order-words gray-words">若有疑问请与客服联系，我们将会尽快为您提供帮助与服务。</p>
                    <p class="order-words gray-words">客服邮箱：kf@imooc.com</p>
                </div>
                <div class="third-line">
                    <button class="go-center" @click="goUserCenter">查看我的订单</button>
                </div>
                <div class="third-line">
                    <button class="go-center" @click="goMain">返回主页</button>
                </div>
            </div>
        </div>

    </div>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#pay",
        data: {
            user: null,
            success: false,
            orderId: null,
            paymentInfo: [],
            amount: 0,
            alipayForm: "",
            total: ""
        },
        created() {
            this.isLogin();
            // 获得订单号
            let ss = location.href.split("?");
            if (ss.length != 2) {
                alert("orderId不能为空")
                return;
            }
            let orderId = ss[1].split("=")[1];
            // 如果orderId为空，跳转到错误页面
            if (orderId == null || orderId == undefined || orderId == '') {
                alert("orderId不能为空")
                return;
            }
            let queryString = window.location.search;
            let urlParams = new URLSearchParams(queryString);
            this.total = urlParams.get('total');

            this.orderId = orderId;

            // 每个3秒调用后台方法，查看订单是否已经支付成功
            this.setTimer();
        },
        methods: {
            isLogin() {
                axios.get('/user').then(res => {
                    this.user = res.data.data
                })
            },
            setTimer() {
                return setInterval(() => {
                    if (!this.success) {
                        this.checkPayResult()
                    }
                }, 3000)
            },
            // 查询是否支付成功
            checkPayResult() {
                var orderId = this.orderId;

                // let data = "orderId="+this.orderId;
                axios.get('/order/selectOrderStatus?orderId=' + orderId)
                    .then(resp => {
                        if (resp.data.message == "not-login") {
                            alert("请先登录");
                            window.location.href = "/front/login.html"
                        }
                        if (resp.status == 200) {
                            let orderStatus = resp.data.status;
                            console.log(orderStatus);

                            if (orderStatus === "待发货" || orderStatus === "待收货" || orderStatus === "待评价") {
                                // window.location.href = "success.html?orderId=" + orderId + "&orderAmount=" + this.amount;
                                this.success = true;
                            }
                        } else {
                            alert(resp.data.msg);
                        }
                    });
            },
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            goMain() {
                window.location.href = "/front/main.html";
            },
            goUserCenter() {
                location.href = '../order/show.html'
            }
        }
    });
</script>
</body>

</html>